<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    width="700px"
    @onCommit="handleSubmit"
    :hasFooter="true"
    destroy-on-close
    @close="clear"
  >
    <template #content>
      权限管理
      <!-- <el-form ref="formRef" :model="formInline" style="position: relative" :rules="rules"   :validate-on-rule-change="false">
        <el-form-item label="用户姓名：" class="form-inline" prop="nickName">
          <el-input
            v-model.trim="formInline.nickName"
            placeholder="请输入用戶姓名"
            class="input-left"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属角色：" class="form-right" prop="roleName">
          <el-select v-model="formInline.roleName"
          value-key="id" class="m-2" placeholder="--请选择--" size="large"   @change='user'>
            <el-option
              v-for="item in props.user"
              :key="item.id"
              :label="item.name"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门：" class="form-inline" prop="deptName">
        <el-select v-model="formInline.deptName" class="m-2" placeholder="--请选择--" size="large"  value-key="id" @change='depart'>
            <el-option
              v-for="item in options"
              :key="item.name"
               :label="item.name"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="性别：" class="form-right is" prop="gender">
          <el-input
            v-model.trim="formInline.gender"
            placeholder="请输入性别"
            class="input-right"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" class="form-inline"  prop="mobile">
          <el-input
            v-model.trim="formInline.mobile"
            placeholder="请输入联系电话"
            class="input-left"
          ></el-input>
        </el-form-item>
        <el-form-item label="账户：" class="form-right is" prop="name" v-if="props.title !=='修改用户'">
          <el-input
            v-model.trim="formInline.name"
            placeholder="请输入账户"
            class="input-right"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：" class="form-inline"  prop="password" v-if="props.title !=='修改用户'">
          <el-input
            v-model.trim="formInline.password"
            placeholder="请输入密码"
            class="input-left"
          ></el-input>
        </el-form-item>
      </el-form> -->
    </template>
  </back-dialog-base>
</template>

<script setup>
import { defineProps, reactive, ref, unref, defineEmits, onUpdated, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { department, modify } from '@/api/user'
import { message } from '@/utils/message'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  user: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['onReload'])
const formRef = ref(null)
const options = ref([])
const formInline = reactive({
  nickName: '',
  deptName: '',
  gender: '',
  mobile: '',
  roleName: '',
  password: '',
  name: '',
  roleId: '',
  deptId: ''
})
let validPassword = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
      if (!reg.test(value)) {
 callback(new Error('密码必须是由4-20位字母+数字组合'))
      } else {
          callback()
      }
  }
const rules = reactive({
  nickName: [
    {
      required: true,
      message: '用户姓名不能为空',
      trigger: 'blur'
    }
  ],
  roleName: [
    {
      required: true,
      message: '所属角色不能为空',
      trigger: 'blur'
    }
  ],
  deptName: [
    {
      required: true,
      message: '所属部门不能为空',
      trigger: 'blur'
    }
  ],
  gender: [
    {
      required: true,
      message: '性别不能为空',
      trigger: 'blur'
    }
  ],
  mobile: [
    {
      required: true,
      message: '联系电话不能为空',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur'
    },
     { validator: validPassword, trigger: 'blur' }
  ],
  name: [
    {
      required: true,
      message: '账号不能为空',
      trigger: 'blur'
    }
  ]
})
onUpdated(() => {
  if (props.title === '新增用户') {
    clear()
  } else {
   formInline.nickName = props.rowData.nickName
   formInline.deptName = props.rowData.deptName
   formInline.gender = props.rowData.gender
   formInline.mobile = props.rowData.mobile
   formInline.roleName = props.rowData.roleName
  }
})
const handleSubmit = () => {
  formRef.value.validate((val) => {
    if (val) {
      if (props.title === '修改用户') {
        formInline.roleId = props.rowData.roleId
        formInline.deptId = props.rowData.deptId
        save(Object.assign({ ...props.rowData }, formInline))
      } else if (props.title === '新增用户') {
        save(formInline)
      }
    } else {
      console.log('提交失败')
      return false
    }
  })
}

const save = async (data) => {
  console.log(data)
  // const res = await modify(data)
  // if (res && res.id) {
  //   message({ type: 'success', message: '操作成功!' })
  //   clearForm()
  //   emits('onReload')
  // }
}

const clearForm = () => {
  // if (!formRef.value) return
  // formRef.value.resetFields()
}

const clear = () => {
  // const form = unref(formRef)
  // form.resetFields()
  clearformInline()
}

const clearformInline = () => {
  formInline.nickName = ''
  formInline.roleName = ''
  formInline.deptName = ''
  formInline.gender = ''
  formInline.mobile = ''
  formInline.password = ''
  formInline.name = ''
}
// 查询部门
// const dept = async() => {
// const res = await department()
// options.value = res
// }
// dept()
watch(
  // () => props.rowData || props.rowData.state,
  // () => {
  //   save(props.rowData)
  // }
)
</script>

<style lang="scss" scoped>
:deep(.el-select){
  width: 220px;
  .el-input__icon{
    line-height: 35px;
  }
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
  width: 100%;
}
.form-inline {
  .input-left {
    width: 220px;
    height: 32px;
  }
}
.form-right {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 300px;
  .input-right {
    width: 220px;
    height: 32px;
  }
}
.form-right:nth-child(4) {
  top: 61px;
  right: -30px;
  :deep(.el-form-item__label){
    padding-right: 9px;
  }
}
.form-right:nth-child(6) {
  top: 122px;
   right: -30px;
    :deep(.el-form-item__label){
    padding-right: 9px;
  }
}
.form-inline:nth-child(7) {
  position: relative;
    left: 27px;
  .input-left{
    width:220px;
  }
}

:deep(.el-form-item.is-required:not(.is-no-asterisk)
    > .el-form-item__label:before) {
  position: absolute;
  left: -7px;
}

</style>
